<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会比赛成绩管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">项目成绩统计</a>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="esc-card">
            <div class="esc-select">
                <div class="esx_group">
                    <el-form>
                        <el-form-item label="组别：">
                            <el-select v-model="escgroup">
                                <el-option v-for="item in groupData" :key="item.grid" :label="item.name"
                                    :value="item.grid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="col3">
                    <el-form label-width="120">
                        <el-form-item label="统计内容：">
                            <el-select v-model="content">
                                <el-option label="姓名" :value="1"></el-option>
                                <el-option label="单位名称" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- <el-col :span="2">
                    <el-button type="warning">统计</el-button>
                </el-col> -->
            </div>

            <el-table :data="escData" border stripe>
                <el-table-column prop="gridName" label="比赛组">
                </el-table-column>
                <el-table-column prop="sexName" label="性别">
                </el-table-column>
                <el-table-column prop="msidName" label="项目">
                </el-table-column>
                <el-table-column v-if="content === 1" prop="athletes1Name" label="第1名">
                </el-table-column>
                <el-table-column v-else prop="athletes1TeamName" label="第1名">
                </el-table-column>
                <el-table-column v-if="content === 1" prop="athletes2Name" label="第2名">
                </el-table-column>
                <el-table-column v-else prop="athletes2TeamName" label="第2名">
                </el-table-column>
                <el-table-column v-if="content === 1" prop="athletes3Name" label="第3名">
                </el-table-column>
                <el-table-column v-else prop="athletes3TeamName" label="第3名">
                </el-table-column>
                <el-table-column v-if="content === 1" prop="athletes4Name" label="第4名">
                </el-table-column>
                <el-table-column v-else prop="athletes4TeamName" label="第4名">
                </el-table-column>
                <el-table-column v-if="content === 1" prop="athletes5Name" label="第5名">
                </el-table-column>
                <el-table-column v-else prop="athletes5TeamName" label="第5名">
                </el-table-column>
                <el-table-column v-if="content === 1" prop="athletes6Name" label="第6名">
                </el-table-column>
                <el-table-column v-else prop="athletes6TeamName" label="第6名">
                </el-table-column>
                <el-table-column v-if="content === 1" prop="athletes7Name" label="第7名">
                </el-table-column>
                <el-table-column v-else prop="athletes7TeamName" label="第7名">
                </el-table-column>
                <el-table-column v-if="content === 1" prop="athletes8Name" label="第8名">
                </el-table-column>
                <el-table-column v-else prop="athletes8TeamName" label="第8名">
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            groupData: [],
            escgroup: null,
            content: 1,
            escData: [],
        }
    },
    created() {
        this.postGroupinfoList();
    },
    methods: {
        async postGroupinfoList() {
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/match/getGroupmsg');
                if (result.data.code == 0) {
                    this.groupData = result.data.data
                    this.escgroup = this.groupData[0].grid
                    this.getEscoreinfoList();
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        async getEscoreinfoList() { // 数据
            const result = await this.$http.get(this.BACKEND_URL + '/Statis/getmsg', {
                params: {
                    grid: this.escgroup,
                }
            });
            if (result.data.code == 0) {
                this.escData = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
    },
    watch: {
        escgroup(newGroupName, oldGroupName) {
            if (newGroupName !== oldGroupName) {
                this.getEscoreinfoList();
            }
        },
    }
}
</script>

<style lang="less" scoped>
.esc-card {
    margin-top: 15px;
    .esc-select{
        display: flex;
        .esx_group{
            width: 160px;
        }
        .col3{
            width: 250px;
        }
    }
}
</style>